<template>
  <el-form class="tag__from" :model="model" :label-width="labelWidth" ref="ruleForm">
    <slot name="top"/>
    <el-form-item :label="label" prop="tag" :rules="rules">
      <div class="tag_wrap">
        <el-tag
          :key="item.id"
          v-for="(item, index) in data"
          closable
          type="info"
          style="margin-right: 5px;"
          :disable-transitions="false"
          @close="$emit('handleClose', item, index)"
        >{{item[defaultLabel.label]}}</el-tag>
        <div class="placeholder" v-if="!selection.length">{{ placeholder }}</div>
      </div>
    </el-form-item>
    <slot/>
  </el-form>
</template>
<script>
export default {
  props: {
    selection: {
      type: Array
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    label: {
      type: String
    },
    labelWidth: {
      type: [Number, String]
    },
    rules: {
      type: Array,
      default: () => {
        return [{ required: true, message: "请选择", trigger: "blur" }];
      }
    },
    defaultLabel: {
      type: Object,
      default: () => {
        return {
          label: "name",
          prop: "id"
        };
      }
    },
    model: {
      type: Object
    }
  },
  computed: {
    data: {
      get() {
        return this.selection;
      },
      set(data) {
        this.$emit("update:selection", data);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.tag__from {
  .el-form-item {
    margin-bottom: 0 !important;
  }
  .tag_wrap {
    @include scrollBar;
    overflow-x: auto;
    white-space: nowrap;
    border: 1px solid #e7e7e7;
    border-radius: 5px;
    padding: 0 5px;
  }
  .placeholder {
    text-indent: 0.5em;
    color: #ccc;
  }
}
</style>